<!--
 * @Author: zzd993
 * @Date: 2022-09-24 17:29:55
 * @LastEditors: zzd993
 * @LastEditTime: 2022-12-13 20:01:27
 * @FilePath: \vue设计与实现\test.html
 * Copyright (c) 2022 by ZZD, All Rights Reserved. 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>zzd</title>
    <style>
        .container {
            position: relative;
            width: 600px;
            height: 400px;
            margin: 0 auto;
            background-color: gray;
            overflow: hidden;
        }

        .ul-img {
            position: absolute;
            display: flex;
            width: 4200px;
            height: 400px;
            left: 0;
            padding: 0;
            margin: 0;
        }

        .li-img {
            list-style: none;
            width: 600px;
            height: 400px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: aquamarine;
            font-size: 30px;
            font-weight: 800;
            border: 1px solid #ccc;
        }

        /* 上一张、下一张 */
        .prev,
        .next {
            position: absolute;
            height: 400px;
            width: 80px;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 0;
        }

        .prev {
            left: 0;
        }

        .next {
            right: 0;
        }

        .prev span,
        .next span {
            display: block;
            color: #fff;
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            cursor: pointer;
        }

        /* 数字切换按钮 */
        .num-box {
            position: absolute;
            left: 50%;
            bottom: 20px;
            transform: translate(-50%, 0);
            z-index: 2;
        }

        .num-ul {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
        }

        .num-ul li {
            height: 20px;
            width: 20px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 9px;
            color: #fff;
            margin: 0 4px;
            cursor: pointer;
            user-select: none;
        }

        .flex {
            width: 400px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            border: red 1px solid;
            margin: 50px auto;
        }

        .item {
            margin: 10px;
            width: 100px;
            height: 100px;
            background: blue;
            text-align: center;
            line-height: 100px;
            flex: auto;
        }
    </style>
</head>

<body>
    <select name="" id="">
        <option value="">2000</option>
        <option value="" checked>2001</option>
        <option value="" selected>2002</option>
        <option value="" choose>2003</option>
    </select>

    <a href="#" title="6">6</a>

    账号：<input type="text"><br>
    密码：<input type="password"><br>
    性别：<input type="radio"><br>
    婚姻情况：<input type="radio"><br>


    <h1>6</h1>

    <table border="1">
        <caption>横跨两列的单元格</caption>
        <tr>
            <th>姓名</th>
            <th colspan="2">电话</th>
        </tr>
        <tr>
            <td>Bill Gates</td>
            <td>555 77 854</td>
            <td>555 77 855</td>
        </tr>
    </table>
    <table border="1">
        <caption>横跨两行的单元格</caption>
        <tr>
            <th>姓名</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">电话</th>
            <td>555 77 854</td>
        </tr>
        <tr>
            <td>555 77 855</td>
        </tr>
    </table>

    <div class="node"></div>



    <div class="container">
        <!--  图片列表  -->
        <ul class="ul-img">
            <li class="li-img">1</li>
            <li class="li-img">2</li>
            <li class="li-img">3</li>
            <li class="li-img">4</li>
            <li class="li-img">5</li>
        </ul>

        <!--  上一张、下一张按钮  -->
        <div class="prev">
            <span>&lt;</span>
        </div>
        <div class="next">
            <span>&gt;</span>
        </div>

        <!-- 数字切换按钮 -->
        <div class="num-box">
            <ul class="num-ul">
                <li data-index="0">1</li>
                <li data-index="1">2</li>
                <li data-index="2">3</li>
                <li data-index="3">4</li>
                <li data-index="4">5</li>
            </ul>
        </div>
    </div>



    <div class="flex">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
    </div>


    <!-- 明天二面了 -->

    <script>
        class Counter {
            #number = 10  // es2020，私有属性
            increment() {
                this.#number++
            }
            getNum() {
                return this.#number
            }
        }
        const counter = new Counter()
        counter.increment();
        // console.log(counter.#number);

        (() => {
            let x = (y = 10)
        })()
        // console.log(typeof x);
        // console.log(typeof y);

        let student = {}
        student[Symbol.iterator] = function () {
            let index = 1
            return {
                next() {
                    return {
                        done: index > 10,
                        value: index++
                    }
                }
            }
        }
        for (let i of student) {
            // console.log(i);
        }
        function* count() {
            yield 1
            yield 2
            return 3
        }
        let c = count()
        // console.log(c.next());
        // console.log(c.next());
        // console.log(c.next());
        // console.log(c.next());

        function* count2() {
            yield 1
            yield 2
            return 3
        }
        var c2 = count2()
        // for (i of c) console.log(i)


        const data = {}
        const element = document.querySelector('.node')
        // console.log(element);
        // console.log(element.toString());
        data[element] = 'objectData'
        // console.log(data['[object HTMLDivElement]']);

        const dataMap = new Map()
        const element2 = document.querySelector('.node')
        dataMap.set(element2, 'objectData')
        // console.log(dataMap.get(element2))
        // console.log(dataMap)


        // let arr = ['1','6',6,1]
        // let p = arr.slice(0,1)
        // console.log(p);
        // console.log(arr);
        // let p2 = arr.splice(0,1)
        // console.log(p2);
        // console.log(arr);

        const fxArr = ["One", "Two", "Three"]
        const fxArrs = fxArr.concat([])
        // console.log(fxArrs);


        function deepCopy(object) {
            if (!object || typeof object !== "object") return;
            let newObj = Array.isArray(object) ? [] : {};
            for (let key in object) {
                if (object.hasOwnProperty(key)) {
                    newObj[key] =
                        typeof object[key] === "object" ? deepCopy(object[key]) : object[key];
                }
            }
            return newObj;
        }

        // ''、 0、undefined、null 是没有
        // []、{}是有了
        // if(null) {
        //     console.log('有了');
        // } else {
        //     console.log('没有');
        // }




        // console.log(Math.random());
        // console.log(Math.ceil(2.6));
        // console.log(Math.round(4.3));


        // console.log(a);
        // var a = 1
        // console.log(a);
        // function a() {
        //     console.log(123);
        // }

        // var obj = {
        //     a: 10,
        //     b: 20,
        //     c: 30,
        //     func: function(a,b,c) {
        //         console.log(a);
        //         console.log(this.b);
        //         console.log();
        //     }
        // }
        // var f = obj.func.bind(obj,[1,2,3])
        // f()


        function shortenArray(arr) {
            // 处理边界
            if (!Array.isArray(arr) || arr.length <= 1) {
                return arr;
            }

            // 记录结果
            const result = [];

            // 记录连续数字的开始位置
            let start = 0;
            // 记录连续数字的结束位置
            let last = 0;

            function pushArr(arrStart, arrEnd) {
                if (arrStart === arrEnd) {
                    result.push(arr[arrStart].toString());
                } else {
                    result.push(`${arr[arrStart]}->${arr[arrEnd]}`);
                }
            }

            // 一次循环获取结果
            for (let i = 1; i < arr.length; i++) {
                const temp = arr[i];
                if (arr[last] + 1 === temp) {
                    last = i;
                } else {
                    pushArr(start, last);
                    start = i;
                    last = i;
                }
            }

            // 处理剩余数据
            pushArr(start, last);

            return result;
        }

        shortenArray([1, 2, 3, 4, 6, 7, 9, 13, 15]); // ['1->4','6->7','9','13','15']



        // 获取元素节点
        var containerDom = document.getElementsByClassName("container")[0]; // 容器
        var ulDom = document.getElementsByClassName("ul-img")[0]; // 图片盒子
        var prevDom = document.getElementsByClassName("prev")[0].firstElementChild; // 上一张按钮
        var nextDom = document.getElementsByClassName("next")[0].firstElementChild; // 下一张按钮
        var numUlDom = document.getElementsByClassName("num-ul")[0]; // 数字按钮父级容器
        var numList = document
            .getElementsByClassName("num-ul")[0]
            .getElementsByTagName("li"); // 数字切换按钮列表

        // 定义全局变量
        var currentIndex = 0; // 当前显示的图片索引
        var timer = null; // 自动播放定时器
        numList[currentIndex].style.backgroundColor = "#ccc"; // 默认选中第一个数字
        // 上一张
        prevDom.addEventListener("click", prevFun);
        // 下一张
        nextDom.addEventListener("click", nextFun);
        // 鼠标移入容器，停止自动播放
        containerDom.addEventListener("mouseenter", stopAutoPlay);
        // 鼠标移出容器，开启自动播放
        containerDom.addEventListener("mouseleave", autoPlay);
        // 数字按钮点击事件
        numUlDom.addEventListener("click", numClick);

        // 开启自动播放
        autoPlay();

        // 切换上一张
        function prevFun() {
            ulDom.style.transition = "0.5s";
            numList[currentIndex].style.backgroundColor = ""; // 清空上一个按钮的样式
            if (currentIndex === 0) {
                ulDom.style.transition = "0s"; // 为了实现无缝滚动，清除动画
                currentIndex = 4;
            } else {
                --currentIndex;
            }
            ulDom.style.left = `-${currentIndex * 600}px`;
            numList[currentIndex].style.backgroundColor = "#ccc";
        }

        // 切换下一张
        function nextFun() {
            ulDom.style.transition = "0.5s";
            numList[currentIndex].style.backgroundColor = ""; // 清空上一个按钮的样式
            if (currentIndex === 4) {
                ulDom.style.transition = "0s"; // 为了实现无缝滚动，清除动画
                currentIndex = 0; // 重新播放第一张
            } else {
                ++currentIndex;
            }
            ulDom.style.left = `-${currentIndex * 600}px`;
            numList[currentIndex].style.backgroundColor = "#ccc"; // 设置按钮选中样式
        }

        // 数字按钮点击事件
        function numClick(e) {
            ulDom.style.transition = "0.5s";
            let index = e.target.dataset.index;
            if (index == undefined) {
                return;
            }
            numList[currentIndex].style.backgroundColor = ""; // 清空上一个按钮的样式
            currentIndex = Number(index);
            numList[currentIndex].style.backgroundColor = "#ccc";
            ulDom.style.left = `-${currentIndex * 600}px`;
        }

        // 循环播放
        function autoPlay() {
            // timer = setInterval(nextFun, 1000);
        }

        // 关闭自动播放
        function stopAutoPlay() {
            // 清除定时器
            clearInterval(timer);
        }

        let obj = {
            a: 1,
            b: 2,
            c: 3
        }
        for (const item in obj) {
            // console.log(item);
        }



        function sort1(arr) {
            let res = []
            for (let i = 0; i < arr.length; i++) {
                if (res.indexOf(arr[i]) === -1) {
                    res.push(arr[i])
                }
            }
            return res
        }
        // 赶紧给我offer，哭唧唧
        // 赶紧给我offer，哭唧唧2


        const map = new Map()
        // console.log(map);
        map.set(undefined, undefined)
        map.set(null, null)

        // console.log(map.prototype);

        for (let item of map.entries()) {
            // console.log(item);
        }


        async function testAsy() {
            return 'hello world'
        }

        let res = testAsy()
        console.log(res);
        res.then(res => {
            // console.log(res);
        })



        function testAsync(x) {
            return new Promise(resolve => {
                setTimeout(() => {
                    resolve(x)
                }, 3000);
            })
        }
        async function testAwt() {
            let res = await testAsync('zzd')
            console.log(res)
            console.log('lwh');
        }
        // testAwt()
        // console.log('aha');

        let insertNode = function (node, newNode) {
            if (newNode.key < node.key) {
                if (node.left === null) {
                    node.left = newNode
                } else {
                    insertNode(node.left, newNode)
                }
            } else {
                if (node.right === null) {
                    node.right = newNode
                } else {
                    insertNode(node.right, newNode)
                }
            }
        }
        let inOrderTraverseNode = function (node, callback) {
            if (node !== null) {
                inOrderTraverseNode(node.left, callback)
                callback(node.key)
                inOrderTraverseNode(node.right, callback)
            }
        }

        let minNode = function (node) {
            if (node) {
                while (node && node.left !== null) {
                    node = node.left
                }
                return node.key
            }
            return null
        }

        let searchNode = function (node, key) {
            if (node === null) return false
            if (key < node.key) {
                return searchNode(node.left, key)
            } else if (key > node.key) {
                return searchNode(node.right, key)
            } else {
                return node
            }
        }

        let findMinNode = function (node) {
            while (node && node.left !== null) {
                node = node.left
            }
            return node
        }
        let removeNode = (node, key) => {
            if (node === null) return null
            if (key < node.key) {
                node.left = removeNode(node.left, key)
                return node
            } else if (key > node.key) {
                node.right = removeNode(node.right, key)
                return node
            } else {
                // 键等于node.key
                // 第一种情况--一个叶节点
                if (node.left === null && node.right === null) {
                    node = null
                    return node
                }
                // 第二种情况--一个只有子节点的节点
                // 需要跳过这个节点，直接将父节点指向它的指针指向子节点
                if (node.left === null) {
                    node = node.right
                    return node
                } else if (node.right === null) {
                    node = node.right
                    return node
                }
                // 第三种情况--一个有两个子节点的节点
                let aux = findMinNode(node.right)
                node.key = aux.key
                node.right = removeNode(node.right, aux.key)
                return node
            }
        }

        function BinarySearchTree() {
            let Node = function (key) {
                this.key = key
                this.left = null
                this.right = null
            }
            let root = null

            this.insert = function (key) {
                let newNode = new Node(key)
                if (root === null) {
                    root = newNode
                } else {
                    insertNode(root, newNode)
                }
            }
            this.inOrderTraverse = function (callback) {
                inOrderTraverseNode(root, callback)
            }
            this.min = function () {
                return minNode(root)
            }
            this.search = function (key) {
                return searchNode(root, key)
            }
            this.remove = function (key) {
                root = removeNode(root, key)
            }
        }

        // 深度优先遍历
        let tree = {
            id: '1',
            title: '节点1',
            children: [
                {
                    id: '1-1',
                    title: '节点1-1'
                },
                {
                    id: '1-2',
                    title: '节点1-2',
                    children: [
                        {
                            id: '2-1',
                            title: '节点2-1'
                        },
                        {
                            id: '2-2',
                            title: '节点2-2'
                        }
                    ]
                }
            ]
        }
        let tree2 = [
            {
                id: '1',
                title: '节点1',
                children: [
                    {
                        id: '1-1',
                        title: '节点1-1'
                    },
                    {
                        id: '1-2',
                        title: '节点1-2'
                    }
                ]
            },
            {
                id: '2',
                title: '节点2',
                children: [
                    {
                        id: '2-1',
                        title: '节点2-1'
                    },
                    {
                        id: '2-2',
                        title: '节点2-2'
                    }
                ]
            }
        ]
        let deepTraversal1 = (node, nodeList = []) => {
            if (node !== null) {
                nodeList.push(node.id)
                if (node.children && node.children.length > 0) {
                    let children = node.children
                    for (let i = 0; i < children.length; i++) {
                        deepTraversal1(children[i], nodeList)
                    }
                }
            }
            return nodeList
        }

        console.log(deepTraversal1(tree));

        // 广度优先
        function treeForeach(tree, func) {
            let node, list = [...tree]
            while (node = list.shift()) {
                func(node)
                node.children && list.push(...node.children)
            }
        }

        treeForeach(tree2, node => console.log(node.title))
        console.log(tree2);



        // 冒泡排序

        function bubbleSort(arr) {
            for (let i = 0; i < arr.length; i++) {
                for (let j = 0; j < arr.length - 1 - i; j++) {
                    if (arr[j] > arr[j + 1]) {
                        [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
                    }
                }
            }
            return arr
        }

        // 快排

        let arr = [3, 5, 2, 6, 2, 8, 4, 6]

        function quickSort(arr) {
            return quick(arr, 0, arr.length - 1)
        }
        function quick(array, left, right) {
            //用于划分更小的数组
            let index;
            if (array.length > 1) {
                index = partition(array, left, right);
                if (left < index - 1) {
                    quick(array, left, index - 1);
                }
                if (index < right) {
                    quick(array, index, right);
                }
            }
            return array;
        }
        function partition(array, left, right) {
            // 这里取数组中间的那个值作为主元
            const pivot = array[Math.floor((right + left) / 2)];
            let i = left;
            let j = right;
            while (i <= j) {
                while (array[i] < pivot) { i++ };
                while (array[j] > pivot) { j-- };
                // 找到了左边比主元大的值和右边比主元小的值，就交换它们
                if (i <= j) {
                    [array[i], array[j]] = [array[j], array[i]]
                    i++;
                    j--;
                }
            }
            //返回左指针的索引，用来在quick函数中创建子数组。
            return i;
        }

        // console.log(quickSort(arr));


        // const p1 = new Promise(res => {
        //     setTimeout(() => {
        //         res('resolve3')
        //         console.log('timer1');
        //     }, 0);
        //     res('resolve1')
        //     res('resolve2')
        // }).then(res => {
        //     console.log(res);
        //     setTimeout(() => {
        //         console.log(p1);
        //     }, 1000);
        // }).finally(res => {
        //     console.log('finally', res);
        // })

        // const async1 = async () => {
        //     console.log('async1')
        //     setTimeout(() => {
        //         console.log('timer1');
        //     }, 2000);
        //     await new Promise(resolve => {
        //         console.log('promise1');
        //     })
        //     console.log('async1 end');
        //     return 'async1 success'
        // }
        // console.log('script start');
        // async1().then(res => console.log(res))
        // console.log('script end');
        // Promise.resolve(1)
        // .then(2)
        // .then(Promise.resolve(3))
        // .catch(4)
        // .then(res => console.log(res))
        // setTimeout(() => {
        //     console.log('timer2');
        // }, 1000);


        // const first = () => (new Promise((resolve, reject) => {
        //     console.log(3)
        //     let p = new Promise((resolve, reject) => {
        //         console.log(7)
        //         setTimeout(() => {
        //             console.log(5)
        //             resolve(6)
        //             console.log(p);
        //         }, 0);
        //         resolve(1)
        //     })
        //     resolve(2)
        //     p.then(arg => {
        //         console.log(arg)
        //     })
        // }))
        // first().then(arg => {
        //     console.log(arg);
        // })
        // console.log(4);


        // async function async1() {
        //     try {
        //         await Promise.reject('error!!!')
        //     } catch (e) {
        //         console.log(e)
        //     }
        //     console.log('async1');
        //     return Promise.resolve('async1 success')
        // }
        // async1().then(res => console.log(res))
        // console.log('script start')

        // async function testSometing() {
        //     console.log("执行testSometing");
        //     return "testSometing";
        // }

        // async function testAsync() {
        //     console.log("执行testAsync");
        //     return Promise.resolve("hello async");
        // }

        // async function test() {
        //     console.log("test start...");
        //     const v1 = await testSometing();
        //     console.log(v1);
        //     const v2 = await testAsync();
        //     console.log(v2);
        //     console.log(v1, v2);
        // }

        // test();

        // var promise = new Promise(resolve => {
        //     console.log("promise start...");
        //     resolve("promise");
        // });
        // promise.then(val => console.log(val));

        // console.log("test end...");



        // async function async1() {
        //     console.log('async1 start');
        //     await new Promise(resolve => {
        //         console.log('promise1')
        //     })
        //     console.log('async1 success');
        //     return 'async1 end'
        // }
        // console.log('srcipt start')
        // async1().then(res => console.log(res))
        // console.log('srcipt end')


        // async function async1() {
        //     console.log("async1 start");
        //     await async2();
        //     console.log("async1 end");
        //     setTimeout(() => {
        //         console.log('timer1')
        //     }, 0)
        // }
        // async function async2() {
        //     setTimeout(() => {
        //         console.log('timer2')
        //     }, 0)
        //     console.log("async2");
        // }
        // async1();
        // setTimeout(() => {
        //     console.log('timer3')
        // }, 0)
        // console.log("start")


        let obj2 = {}
        // Object.prototype.c = 4
        // console.log();
        obj2.a = 2
        obj2.b = 4

        for (let i in obj2) {
            // console.log(obj[i]);
        }

        // console.log(Object.prototype);



        async function test() {
            let arr = [3, 2, 1];
            for (const item of arr) {
                const res = await fetch(item);
                console.log(res);
            }
            console.log("end");
        }
        function fetch(x) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve(x);
                }, 500 * x);
            });
        }

        // test();

        
        // 咳嗽
        // 要放假啦
        // 感冒怎么还没好


        function test(a, ...args) {
            console.log([...arguments]);
            console.log(args);
        }
        // test(1,2,3)

        // 要放假了静不下心学了哈哈哈














    </script>
</body>

</html>